<script setup>
import PageContainer from '@/components/PageContainer.vue';
import ArticleEdit from '@/views/article/components/ArticleEdit.vue';
import ChannelSelect from '@/views/article/components/ChannelSelect.vue';
import {ref,computed,onMounted,onUnmounted} from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { Edit,Delete } from '@element-plus/icons-vue';

const articleList=ref([
    {id:"1001",title:'如何写好一篇小说',cate_name:'微小说',state:'已发布',pub_date:'2023-10-01'},
    {id:"1002",title:'短篇小说的结构分析',cate_name:'短篇小说',state:'草稿',pub_date:'2023-09-15'},
    {id:"1003",title:'中篇小说的叙事技巧',cate_name:'中篇小说',state:'已发布',pub_date:'2023-08-20'},
    {id:"1004",title:'长篇小说的世界构建',cate_name:'长篇小说',state:'已发布',pub_date:'2023-07-30'},
    {id:"1005",title:'小说写作的常见误区',cate_name:'其他',state:'草稿',pub_date:'2023-06-25'},
    {id:"1006",title:'Presented Present',cate_name:'长篇小说',state:'草稿',pub_date:'2025-07-10'},
    {id:"1007",title:'未曾发生的意外',cate_name:'长篇小说',state:'草稿',pub_date:'2025-07-10'},
    {id:"1008",title:'未来的某日',cate_name:'微小说', state:'已发布',pub_date:'2024-11-06'},
    {id:"1009",title:'振臂高挥-埼玉夏季大会',cate_name:'中篇小说', state:'草稿',pub_date:'2024-11-06'},
]);
const receivedList=ref([]);
const selectedcategory=ref('');
const selectedState=ref('');
const searchCategory=ref('')
const searchState=ref('')
const currentPage=ref(1);
const pageSize=ref(9);
const total=ref(articleList.value.length);
const articleEditref=ref(null);
const loading=ref(false);

const handleSizeChange=(newSize)=>{
    pageSize.value=newSize;
    currentPage.value=1;
};
const handlePageChange=(newPage)=>{
    currentPage.value=newPage;
};
const filterArticleList=computed(()=>{
    let filtered=articleList.value.filter(item=>{
        return (searchCategory.value?item.cate_name===searchCategory.value:true) &&
               (searchState.value?item.state===searchState.value:true)
    });
    total.value=filtered.length;
    const maxPage=Math.ceil(total.value/pageSize.value);
    if(currentPage.value>maxPage){
        currentPage.value=maxPage;
    }
    const start=(currentPage.value-1)*pageSize.value;
    return filtered.slice(start,start+pageSize.value);
});
const handleSearch=()=>{
    loading.value=true;
    setTimeout(()=>{
        loading.value=false;
        searchCategory.value=selectedcategory.value;
        searchState.value=selectedState.value;
        currentPage.value=1;
    },500);
};
const handleReset=()=>{
    selectedcategory.value='';
    selectedState.value='';
    searchCategory.value='';
    searchState.value='';
    currentPage.value=1;
};
const onAddArticle=()=>{
    articleEditref.value.open();
};
const onEditArticle=(row)=>{
    articleEditref.value.open(row);
};
const onDelArticle=(row)=>{
    ElMessageBox.confirm(`确定删除文章《${row.title}》吗？`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    }).then(()=>{handleDeleteArticle(row.id)
    }).catch(()=>{});
};
const handleDeleteArticle=(id)=>{
    const currentPageBeforeDelete=currentPage.value;
    articleList.value=articleList.value.filter(item=>item.id!==id);
    total.value=articleList.value.length;
    const itemsOnCurrentPage=filterArticleList.value.length;
    if(itemsOnCurrentPage===0 && currentPageBeforeDelete>1){
        currentPage.value=currentPageBeforeDelete-1;
    }
    ElMessage({
        message:'文章删除成功',
        type:'success'
    });
};
const handleAddArticle=(newArticle)=>{
    articleList.value.unshift(newArticle);
    total.value=articleList.value.length;
};
const handleEditArticle=(updatedArticle)=>{
    const index=articleList.value.findIndex(item=>item.id===updatedArticle.id);
    if(index!==-1){
        articleList.value.splice(index,1,updatedArticle);
    }
};
const localDataFromLocalStorage=()=>{
    const storedData=localStorage.getItem('brotherChannelList');
    if(storedData){
        receivedList.value=JSON.parse(storedData);
}
};
onMounted(()=>{
    localDataFromLocalStorage();
    window.addEventListener('channelListUpdated',localDataFromLocalStorage);
});
onUnmounted(()=>{
    window.removeEventListener('channelListUpdated',localDataFromLocalStorage);
});
const handleStorageChange=(event)=>{
    if(event.key==='brotherChannelList'){
        localDataFromLocalStorage();
    }
};
</script>

<template>
    <page-container title="文章管理">
        <template #extra>
            <div style="display: flex; align-items: center; margin-left: auto;">
                <el-button type="primary" @click="onAddArticle">添加文章</el-button>
            </div>
        </template>
        <el-form inline>
            <el-form-item label="文章标题">
                <ChannelSelect :options="receivedList" v-model="selectedcategory"></ChannelSelect>
            </el-form-item>
            <el-form-item>
                <el-select v-model="selectedState" style="width: 180px">
                    <el-option label="已发布" value="已发布"></el-option>
                    <el-option label="草稿" value="草稿"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="filterArticleList" style="width: 100%;">
            <el-table-column prop="title" label="文章标题">
                <template #default="{row}">
                    <el-link type="primary">
                        {{ row.title }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="cate_name" label="文章分类"></el-table-column>
            <el-table-column prop="state" label="发布状态"></el-table-column>
            <el-table-column prop="pub_date" label="发布时间"></el-table-column>
            <el-table-column label="操作" width="220">
                <template #default="{row}">
                    <el-button type="primary" @click="onEditArticle(row)" :icon="Edit" circle plain></el-button>
                    <el-button type="danger" @click="onDelArticle(row)" :icon="Delete" circle plain></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <div class="empty-box">
                    <el-empty description="No data"></el-empty>
                </div>
            </template>
        </el-table>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            style="margin-top: 20px; text-align: right"
            background
            layout="prev, pager, next,total, sizes,jumper"
            :page-sizes="[5,6,8,9]"
            :total="total"
            @current-change="handlePageChange"
            @size-change="handleSizeChange">
        </el-pagination>
        <ArticleEdit ref="articleEditref" :options="receivedList" @add-article="handleAddArticle" @edit-article="handleEditArticle"/>
    </page-container>
</template>

<style scoped>
/* 页面容器样式 */
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

/* 搜索区域样式 */
.el-form {
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.el-form-item {
  margin-right: 16px !important;
  margin-bottom: 12px !important;
}

/* 表格样式增强 */
.el-table {
  padding: 10px 0;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: none !important;
}

.el-table th {
  background-color: #fafafa !important;
  font-weight: 500 !important;
  color: #4e5969 !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

.el-table tr:hover > td {
  background-color: #f5f8ff !important;
}

.el-table__empty-block {
  min-height: 300px !important;
}

/* 表格列内容样式 */
.el-link {
  transition: all 0.2s;
}

.el-link:hover {
  color: #4096ff !important;
  text-decoration: underline;
}

/* 操作按钮样式优化 */
:deep(.el-button) {
  transition: all 0.2s;
}

:deep(.el-button--primary.is-plain) {
  color: #4096ff;
  border-color: #4096ff;
}

:deep(.el-button--primary.is-plain:hover) {
  background-color: #4096ff;
  color: #fff;
}

:deep(.el-button--danger.is-plain) {
  color: #f56c6c;
  border-color: #f56c6c;
}

:deep(.el-button--danger.is-plain:hover) {
  background-color: #f56c6c;
  color: #fff;
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 空状态样式 */
.empty-box {
  padding: 40px 0;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-container {
    padding: 10px;
  }
  
  .el-form {
    padding: 12px;
  }
  
  .el-form-item {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table-column {
    padding: 0 5px !important;
  }
  
  .el-pagination {
    padding: 12px;
    font-size: 12px;
  }
}

/* 标题列样式 */
:deep(.el-table-column--selection) {
  width: 50px !important;
}

/* 操作列按钮间距 */
:deep(.el-table-column__content .el-button) {
  margin-right: 6px;
}

:deep(.el-table-column__content .el-button:last-child) {
  margin-right: 0;
}

</style>